<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<link>
    <meta charset="UTF-8">
    <title>article</title>

    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}"></link>
    <link rel="stylesheet" th:href="@{/static/layui/css/style.css}"></link>
    <link rel="stylesheet" th:href="@{/static/css/article_add.css}"></link>
    <script th:src="@{/static/jquery/jquery-3.2.1.min.js}"></script>
    <script th:src="@{/static/layui/layui.js}"></script>
    <script src="https://unpkg.com/wangeditor@3.1.1/release/wangEditor.min.js"></script>

</head>
<body>
<div class="outer-layer">
    <div class="article-add-btn">
        <div class="btn-div">
            <input id="article_add_ranking" type="text" placeholder="推荐排名" th:value="${article.ranking}"/>
        </div>
        <div class="btn-div">
            <input id="article_add_source" type="text" placeholder="来源" th:value="${article.source}"/>
        </div>
        <button type="button" class="layui-btn" id="article_add_img">
            <i class="layui-icon">&#xe67c;</i>上传图片
        </button>
        <button id="article_add_sure" class="layui-btn">提交</button>
        <button id="article_add_exit" class="layui-btn">关闭</button>
    </div>
    <input type="hidden" id="article_id"
           th:data-id="${article.id}"
           th:data-action="${action}"
           th:data-img="${article.image}"/>
    <fieldset class="layui-elem-field">
        <legend>tags</legend>
        <div id="article_add_tags" class="layui-field-box">
            <div class="checkboxOne" th:each="tag, index : ${tags}">
                <input class="article_add_tag" type="checkbox" th:id="${tag.id}"/>
                <label th:for="${tag.id}"></label>
                <span th:text="${tag.name}"></span>
            </div>
        </div>
    </fieldset>
    <div id="article_add_img_show">
        <img th:if="${article.image} ne 'null'" th:src="${article.image}"/>
    </div>
    <div class="article-title">
        <input id="article_title" type="text" placeholder="title" th:value="${article.title}"/>
    </div>
    <div class="article-content">
        <div id="article_editor_menu"></div>
        <div style="padding: 5px 0; color: #ccc"></div>
        <div id="article_add_editor" th:utext="${article.content}"></div>
    </div>
</div>
</body>
<script type="text/javascript" th:src="@{/static/js/article.js}"></script>
<script th:inline="javascript">
    $(function () {
        layui.use(['upload', 'layer'], function() {
            article_add_js.layer = layui.layer;
            article_add_js.upload = layui.upload;
            article_add_js.init();
            article_add_js.btn_init();
        });
        var t = [[${article.tags}]];
        for (var i = 0; i < t.length; i++){
            $('#'+t[i].id).attr("checked", 'checked');
        }
    });
</script>
</html>